<template>
	<view class="page">
			<view class="box">
				 <view class="title">
				 	<view class="weekbtn"  @click="changeWeek('last')" >上一周</view>
					<view class="dateObj" >
						{{dayText}}
					</view>
				 	<view class="weekbtn" @click="changeWeek('next')" >下一周</view>
					</view>
		
				 <view class="week">
				 	<text v-for="(item,index) in weekArr" :key="index">{{item}}</text>
				 </view>
				 <view class="dayArr">
				 	 <view class="dayItem"  v-for="(item,index) in weekDate" :key="index" @click="selectDay(item.date)">
						<view :class="item.date==dayText ? 'active1': item.activeType==1 ? 'active2': ''">
							{{item.day}}
						</view>
				 	</view>
				 </view>
			</view>
		<view class="colorTips">
			<view class="item">
				<view class="icon" >
				</view>
				已预约
			</view>
		</view>
		<view class="menu" v-if="menuArr.length">
			<view class="leftBox">
				<view class="lItem" @click="changeType(index)" v-for="(item,index) in menuArr" :key="index" :class="activeType==index ? 'activeItem':''">
					{{item.mealName}}
				</view>
			</view>
			<view class="rightBox">
				<view class="rItem" v-for="(item,index) in menuArr[activeType].mealArr" :key="index">
					<view class="cover">
						<image src="" mode=""></image>
					</view>
					<view class="info">
						<view class="name">
							{{item.name}}
						</view>
						<view class="checkRow">
							<view class="price">
								￥{{item.price}}
							</view>
							<view class="check">
								<u-checkbox-group
								          placement="row"
								          @change="checkboxChange(index)"
								      >
																 <u-checkbox
								              :customStyle="{marginLeft: '100rpx'}"
												:checked="item.checked"
								              >
								          </u-checkbox>
								      </u-checkbox-group>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="bottomBtn">
			<view class="btn" @click="submit" >
				提交预约
			</view>
		</view>
		
		<u-empty style="margin-top: 20rpx;" mode="list" v-if="!menuArr.length" text="没发布菜品,不可预约!">
		</u-empty>
		
	</view>
</template>

<script>
	import {getMonthTbAdvanceOrderApi,getMealtypeApi,moreSaveOrderApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				monthObj:'',
				checkboxVal:[],
				checkboxList:[ ],
				dateObj : '',
				menuArr:[{
					mealName:'早餐',
					mealTypeId:'1',
					mealArr:[
						{
							name: '馒头',
							price: '6',
							checked: true,
						},
						{
							name: '肠粉',
							price: '6',
							checked: false,
						},
						{
							name: '三明治',
							price: '6',
							checked: true,
						},
						{
							name: '三明治',
							price: '6',
							checked: true,
						},{
							name: '三明治',
							price: '6',
							checked: true,
						},
					]
				},{
					mealName:'中餐',
					mealTypeId:'2',
					mealArr:[
						{
							name: '口水鸡',
							price: '6',
							checked: true,
						},
						{
							name: '红烧茄子',
							price: '6',
							checked: true,
						},
						{
							name: '鸡腿',
							price: '6',
							checked: false,
						},]
				},{
					mealName:'晚餐',
					mealTypeId:'3',
					mealArr:[{
							name: '牛排',
							price: '6',
							checked: false,
						},
						{
							name: '白菜',
							price: '6',
							checked: false,
						},
						{
							name: '烧鸡',
							price: '6',
							checked: true,
						},]
				},
				],
				activeType : 0,
				dayArr : [],
				allDayMenuArr:[],
				orderList : [],
				today : '',
				merchNo:'',
				weekArr: ['一', '二', '三', '四', '五', '六', '日'],
				weekDate: [
					{
				        text: '一',
				        id: 1,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '二',
				        id: 2,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '三',
				        id: 3,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '四',
				        id: 4,
				        date: '',
				        day: '',
				        activeType: ""
				    },
				    {
				        text: '五',
				        id: 5,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '六',
				        id: 6,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '日',
				        id: 7,
				        date: '',
				        day: '',
				        activeType: ''
		
				    },
				],
				dayText: '',
				selectDayText: '',
				list: [],
				mondayDate: '',
				sundayDate: '',
			}
		},
		methods: {
			changeType(index){
				this.activeType = index
			},
			selectDayEmit(e){
				console.log(e);
				this.dateObj = e.date
				this.menuArr = this.allDayMenuArr.filter(item=>{
					return item.mealDate == this.dateObj
				})
				this.menuArr.forEach(item=>{
					item.mealName = this.findDir(item.mealTypeId)
					item.mealArr = item.dishNames.split(',')
				})
				let tempArr = this.orderList.filter(item=>{
					return item.eatDate == this.dateObj
				})
				this.checkboxVal = []
				tempArr.forEach(item2=>{
					this.checkboxVal.push(item2.mealTypeId)
				})
				
			},
			findDir(id){
				let str = ''
				this.checkboxList.forEach(item=>{
					if(item.id==id){
						str = item.name
					}
				})
				return str
			},
			checkboxChange(index){
				this.menuArr[this.activeType].mealArr[index].checked = !this.menuArr[this.activeType].mealArr[index].checked
				console.log(this.menuArr[this.activeType].mealArr[index].checked);
			},
			async initDataFinish(e){
				console.log(e);
				return
				let {dayArr,dateObj} = e
				this.dayArr = dayArr
				this.monthObj = dateObj.monthObj
				this.dateObj = dateObj.today
				this.menuArr = []
				this.allDayMenuArr = []
				this.orderList = []
				await this.getMealtype()
				this.getMonthInfo()
			},
			submit(){
				let bool = this.tab(this.dateObj,this.today)
				if(!bool) return this.setMessage('今天及以前的日期不能预约！')
				let tempArr = this.orderList.filter(item=>{
					return this.dateObj == item.eatDate
				})
				let oldTempArr = []
				if(tempArr.length){
					tempArr.forEach(item=>{
						oldTempArr.push(item.mealTypeId)
					})
				}
				
				moreSaveOrderApi({
					newMealTypeIds : this.checkboxVal.join(','),
					oldMealTypeIds : oldTempArr.length ? oldTempArr.join(',') : '' ,
					eatDate : this.dateObj,
					merchNo : this.merchNo
				}).then(res=>{
					this.getMonthInfo().then(res=>{
						this.setMessage('操作成功')
					})
				})
			},
			initLateDate(){
				let date = new Date();
				let year = date.getFullYear();//
				let month = date.getMonth() + 1;
				month = month.toString().padStart(2,'0')
				let day = date.getDate();
				day = day.toString().padStart(2,'0')
				this.today = `${year}-${month}-${day}`
			},
			tab(date1,date2){
			    var oDate1 = new Date(date1);
			    var oDate2 = new Date(date2);
			    if(oDate1.getTime() > oDate2.getTime()){
			        console.log('第一个大');
					return true
			    } else {
					return false
			    }
			},
			getMonthInfo(){
				return getMonthTbAdvanceOrderApi(this.monthObj,{
					merchNo : this.merchNo
				}).then(res=>{
					if(res.mealschedule.length){
						res.mealschedule.forEach(item=>{
							item.mealDate = item.mealDate.split(' ')[0]
							this.dayArr.forEach(item2=>{
								if(item2.date == item.mealDate){
									item2.activeType = 1
								}
							})
						})
						this.allDayMenuArr = res.mealschedule
						this.menuArr = this.allDayMenuArr.filter(item=>{
							return item.mealDate == this.dateObj
						})
						this.menuArr.forEach(item=>{
							item.mealName = this.findDir(item.mealTypeId)
							item.mealArr = item.dishNames.split(',')
						})
					}
					if(res.orderList.length){
						res.orderList.forEach(item=>{
							item.eatDate = item.eatDate.split(' ')[0]
							this.dayArr.forEach(item2=>{
								if(item2.date == item.eatDate){
									item2.activeType = 2
								}
							})
						})
						this.orderList = res.orderList
						let tempArr = this.orderList.filter(item=>{
							return item.eatDate == this.dateObj
						})
						this.checkboxVal = []
						tempArr.forEach(item2=>{
							this.checkboxVal.push(item2.mealTypeId)
						})
					}
					console.log(this.dayArr);
					this.$refs.calendarRef.dayArr = []
					this.$refs.calendarRef.dayArr = this.dayArr
				})
			},
			getMealtype(){
				return getMealtypeApi({
					merchNo : this.merchNo
				}).then(res=>{
					this.checkboxList = res.mealtypeList
				})
			},
			getData(day) {
			    var today = new Date()
			    var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
			    today.setTime(targetday)
			    var tYear = today.getFullYear()
			    var tMonth = today.getMonth()
			    var tDate = today.getDate()
			    tMonth = this.doHandMonth(tMonth + 1)
			    tDate = this.doHandMonth(tDate)
			    return tYear + "-" + tMonth + "-" + tDate
			},
			doHandMonth(month) {
			        var m = month
			        if (month.toString().length == 1) {
			            m = "0" + month
			        }
			        return m
			},
			changeWeek(type) {
			        let weekDate = this.weekDate
			        if (type == 'next') {
			            weekDate.forEach(item => {
			                item.id += 7
			            })
			        } else {
			            weekDate.forEach(item => {
			                item.id -= 7
			            })
			        }
					this.weekDate = weekDate
			        this.handleWeek()
					this.dayText = this.weekDate[0].date
			        this.getDetail(this.dayText)
			},
			initWeekDate() {
			        this.handleWeek()
			        let today = new Date()
			        let dateObj = new Date(today.getTime() + 24 * 60 * 60 * 1000);
			        let year = dateObj.getFullYear();
			        let month = dateObj.getMonth() + 1;
			        month = month.toString().padStart(2, '0')
			        let day = dateObj.getDate();
					day = day.toString().padStart(2, '0')
			        let dayText = `${year}-${month}-${day}`
					this.dayText = dayText
			        this.getDetail(dayText)
			},
			handleWeek() {
			        let dateObj = new Date()
			        let weekNum = dateObj.getDay()
			        let weekDate = this.weekDate
			        weekDate.forEach(item => {
			            item.date = this.getData(-weekNum + item.id)
			            item.day = item.date.substring(8, item.date.length)
			        })
					this.weekDate = weekDate
			        this.getActiveDateType()
			},
			getActiveDateType() {
			        let that = this
			        let data = {
			            beginEatDate: this.weekDate[0].date,
			            endEatDate: this.weekDate[6].date,
			        }
			},
			selectDay(date) {
			        this.dayText = date
			        this.getDetail(date)
			        console.log(date)
			},
			getDetail(date){
				let data = {
					eatDate: date
				}
			},
		},
		components: {
		},
		onLoad({merchNo}) {
			let dateObj = new Date()
			let weekNum = dateObj.getDay()
			this.mondayDate = this.getData(-weekNum + 1),
			this.sundayDate = this.getData(-weekNum + 7),
			this.merchNo = merchNo
			this.initLateDate()
		},
		onShow() {
			this.initWeekDate()
		},
	}
</script>

<style lang="scss" scoped>

.page{
	background-color: #fff;
	.colorTips{
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		width: 100%;
		padding-right: 30rpx;
		margin-bottom: 30rpx;
		.item{
			display: flex;
			margin-left: 20rpx;
			.icon{
				background: #4089f0;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 5rpx;
			}
		}
	}
	.menu{
		border-top: 2rpx solid #eaebef;
		display: flex;
		padding-bottom: 120rpx;
		width: 100%;
		.leftBox{
			width: 200rpx;
			background: #f7f8fa;
			.lItem{
				height: 75rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color:#a4a5a7;
			}
			.activeItem{
				background: #fff !important;
				color: #333 !important;
			}
		}
		.rightBox{
			width: calc( 100% - 200rpx );
			.rItem{
				display: flex;
				align-items: center;
				height: 180rpx;
				padding: 10rpx 30rpx;
				border-bottom: 2rpx solid #eaebef;
				.cover{
					image{
						border-radius: 8rpx;
						width: 140rpx;
						height: 140rpx;
						background: #4089f0;
					}
				}
				.info{
					height: 100%;
					flex: 1;
					padding: 10rpx 40rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					.name{
						font-weight: 600;
						font-size: 32rpx;
					}
					.checkRow{
						display: flex;
						.price{
							color: #fa342f;
						}
						.check{
							
						}
					}
				}
			}
		}
		
		.row{
			font-size: 32rpx;
			display: flex;
			border-bottom: 2rpx solid #eaebef;
			.label{
				width: 150rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 20rpx;
				color: #333;
			}
			.val{
				flex: 1;
				padding: 20rpx 0;
				text{
					padding: 20rpx;
				}
			}
			.input{
				padding: 20rpx 0;
				flex: 1;
				display: flex;
				align-items: center;
			}
		}
	}
	
	.bottomBtn{
			position: fixed;
			left: 50%;
			bottom: 0rpx;
			transform: translateX(-50%);
			height: 120rpx;
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
		.btn{
			z-index: 99;
			background-color: #4089f0;
			color: #fff;
			border-radius: 50rpx;
			font-size: 32rpx;
			width: 90%;
			margin: 30rpx auto;
			@include flexCenter;
			height: 80rpx;
		}
	}
	
}

.box {
    padding: 0 30rpx;
}

 
.box .title .weekbtn {
    height: 50rpx;
    width: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
	background-color: #4089f0;
	color: #fff;
	border-radius: 10rpx;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
	height: 90rpx; 
    border-bottom: 2rpx solid #eaebef;
}

.title .dateObj {
    color: #111111;
    font-size: 34rpx;
    flex: 1;
    display: flex;
    justify-content: center;
}

.title .icon {
    display: grid;
    place-items: center;
    width: 50rpx;
    height: 50rpx;
    background-color: #4089f0;
    border-radius: 50%;
}

.week {
    display: flex;
    color: #111;
}

.week text {
    width: 100rpx;
    height: 80rpx;
    display: grid;
    place-items: center;
    font-size: 30rpx;
}

.dayArr {
    display: flex;
    flex-wrap: wrap;
}

.dayArr .dayItem {
    width: 14.2%;
    height: 80rpx;
    display: grid;
    place-items: center;
}

.dayArr .dayItem .active1 {
    border-radius: 50%;
    width: 48rpx;
    height: 48rpx;
    background-color: #5ac725;
    display: grid;
    place-items: center;
    color: #fff;
}

.dayArr .dayItem .active2 {
    border-radius: 50%;
    width: 48rpx;
    height: 48rpx;
    background-color: #4089f0;
    display: grid;
    place-items: center;
    color: #fff;
}

</style>
